StackNavigator Header增加“返回”按钮

September 26, 2017

StackNavigator 自带了 navigationOptions 属性，但必须以静态对象申明

实现有 3 个要点：

navigationOptions 对象里，创建{param}常量，然后 headerLeft 或者 headerRight 里配置好闭包函数
这样做是因为 navigation 是类的实例成员，无法通过类成员访问，所以需要用闭包绕开这一限制
在 DidMount 事件中配置 params 的闭包函数对象
页面跳转的执行函数

static navigationOptions = ({navigation}) => ({
      const {params} = navigation.state;
      title: 'PlayGround',
      headerRight: <View />,//之前提到过，占位的用的空view
      headerLeft:        <Button onPress={params.handleNavigation && params.handleNavigation()} />,      headerStyle: {
        backgroundColor: 'white',
      },
      headerTitleStyle: {
        textAlign: "center",
        alignSelf: "center",
        fontSize: 16,
      }
  });
  //页面跳转执行函数  toOtherScreen(){    this.props.navigation.navigate('pageDest');  }
  componentDidMount(){
    this.navigation.setParams(
      handleNavigation: ()=>{this.toOtherScreen()}
    )
  }